/* 必填校验proName /新增其他属性/ */
import { defineComponent, computed, inject, reactive, watch, ref } from "vue";
import deepcopy from "deepcopy";
import SelfTableRight from "./self-table-right";
import SelfRowRight from "./self-row-right";

export default defineComponent({
  props: {
    modelValue: Object, // 确保类型匹配
    item: Object,
  },
  emits: ["update:modelValue", "changeItem"],
  setup(props, ctx) {
    const config = inject("configList");

    let state = reactive({
      editData: {},
    });
    //block即选中item
    let block = computed({
      get() {
        return props.item;
      },
    });
    const formRef = ref(null);

    // const resetData = () => {
    //   if (!block.value) {
    //     state.editData = deepcopy(props.modelValue.value);
    //   } else {
    //     state.editData = deepcopy(block.value);
    // state.editData["validata"] = [{
    // 	required: true,
    // 	message: "请输入验证规则",
    // 	trigger: "blur",
    //   }]
    //   }
    //   saveData();
    // };
    const saveData = () => {
      if (!block.value) {
        props.modelValue.value.container = deepcopy(state.editData.container);
        // console.log(123,props.modelValue.value,456,state.editData);
      } else {
        if (!formRef) return;
        // console.log(999, formRef);
        try {
          formRef.value.validate((valid) => {
            if (valid) {
              // console.log(333, state.editData);
              ctx.emit("changeItem", deepcopy(state.editData));
            } else {
              // console.log("error submit!!");
              return false;
            }
          });
        } catch (error) {
          console.log("error", error);
        }
      }
    };
    const reset = () => {
      //选中item
      if (!block.value) {
        // console.log("start", deepcopy(props.modelValue.value));
        state.editData = deepcopy(props.modelValue.value);
      } else {
        //全局
        state.editData = deepcopy(block.value);
        // state.editData["validata"] = `[{
        //   required: true,
        //   message: "请输入验证规则",
        //   trigger: "blur",
        //   }]`;
        // console.log(111,state.editData);
      }
    };
    // 监听block变化
    watch(() => block.value, reset, { immediate: true });
    return () => {
      let tree = [];
      if (!block.value) {
        tree
          .push
          // <>
          //   <ElFormItem label="label布局">
          //     <ElSelect v-model={state.editData.container.labelPosition}>
          //       <ElOption label="左对齐" value="left"></ElOption>
          //       <ElOption label="顶部对齐" value="top"></ElOption>
          //     </ElSelect>
          //   </ElFormItem>
          // </>
          ();
      } else {
        tree.push(
          Object.entries(
            config.filter((item) => item.id === props.item.id)[0].props
          ).map(([propName, propValue]) => {
            return (
              //必填 才显示validate
              (state.editData.mustFill || propName != "validata") && (
                <ElFormItem
                  label={propValue.label || ""}
                  prop={propName}
                  rules={propValue.valid}
                >
                  {{
                    texts: () => (
                      <div style={{ color: "var(--font-hint-color)" }}>
                        {propValue.txt}
                      </div>
                    ),
                    input: () => {
                      return (
                        <ElInput
                          type={propValue.types || "text"}
                          v-model={state.editData[propName]}
                          clearable={true}
                          placeholder=""
                        ></ElInput>
                      );
                    },
                    color: () => (
                      <ElColorPicker
                        v-model={state.editData[propName]}
                      ></ElColorPicker>
                    ),
                    select: () => (
                      <ElSelect v-model={state.editData[propName]}>
                        {propValue.options.map((optionItem) => {
                          return (
                            <ElOption
                              label={optionItem.label}
                              value={optionItem.value}
                            ></ElOption>
                          );
                        })}
                      </ElSelect>
                    ),
                    table: () => (
                      <>
                        <SelfTableRight
                          v-model={state.editData[propName]}
                          isInspect={propValue.isInspect}
                        ></SelfTableRight>
                      </>
                    ),
                    radio: () => (
                      <>
                        <SelfRowRight
                          v-model={state.editData[propName]}
                        ></SelfRowRight>
                      </>
                    ),
                  }[propValue.type]()}
                </ElFormItem>
              )
            );
          })
        );
      }
      return (
        <>
          {block.value && (
            <ElForm ref={formRef} model={state.editData} labelPosition="top">
              {tree}
              <ElButton onClick={saveData} type="primary">
                保存
              </ElButton>
              {/* <ElButton onClick={resetData}>重置</ElButton> */}
            </ElForm>
          )}
        </>
      );
    };
  },
});
